<script setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import { addresource, editresource, getsp2000, isExist, resourceLevelCity } from '@/utils/api.js'
import close from '@/assets/icon/close.svg'
const ruleFormRef = ref(null);
const fRoptionObj = reactive({});
const emit = defineEmits(['refreshList'])
// const closeSelf = () => {
//     emit('PopUp', '自定义属性')
// }

const isform = ref(false)
const isformType = ref('')

const LevelCity = ref([])

const library = reactive(["animal", "plant", "fungus"])

const ruleForm = reactive({
    "resourceType": "",
    "zhong": "",
    "areaId": "",
    "jie": "",
    "men": "",
    "menLatinName": "",
    "gang": "",
    "gangLatinName": "",
    "mu": "",
    "muLatinName": "",
    "ke": "",
    "keLatinName": "",
    "shu": "",
    "shuLatinName": "",
    "zhongLatinName": "",
    "level": "",
    "endangeredLevel": "",
    "distribution": "",
    "remark": "",
    "type": "",
    "coverImage": "",
    "characteristic": "",
    "menPy": "",
    "gangPy": "",
    "muPy": "",
    "kePy": "",
    "shuPy": "",
    "zhongPy": "",
    "levelCity": "",
    "areaDistribution": "",
    "residentType": "",
    "zhongEn": "",
    "areaNumber": '',
    "naturalType": "",
    "type": "",
    "utilization": "",
    "serialNumber": "",
    "age": '',
    "phenology": "",
    "level": "",
    "coverImage": "",
    "height": '',
    "xiongjing": '',
    "guanfu": '',
    "characteristic": "",
    "meaning": "",
    "health": ""
})

const initialRuleForm = {
    'id': '',
    "resourceType": "",
    "zhong": "",
    "areaId": "",
    "jie": "",
    "men": "",
    "menLatinName": "",
    "gang": "",
    "gangLatinName": "",
    "mu": "",
    "muLatinName": "",
    "ke": "",
    "keLatinName": "",
    "shu": "",
    "shuLatinName": "",
    "zhongLatinName": "",
    "level": "",
    "endangeredLevel": "",
    "distribution": "",
    "remark": "",
    "type": "",
    "coverImage": "",
    "characteristic": "",
    "menPy": "",
    "gangPy": "",
    "muPy": "",
    "kePy": "",
    "shuPy": "",
    "zhongPy": "",
    "levelCity": "",
    "areaDistribution": "",
    "residentType": "",
    "zhongEn": "",
    "areaNumber": '',
    "naturalType": "",
    "type": "",
    "utilization": "",
    "serialNumber": "",
    "age": '',
    "phenology": "",
    "level": "",
    "coverImage": "",
    "height": '',
    "xiongjing": '',
    "guanfu": '',
    "characteristic": "",
    "meaning": "",
    "health": ""
}

const rules = reactive({
    zhong: [{ required: true, message: '请输入物种名称', trigger: 'blur' }]
})

const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            let obj = Object.assign({}, ruleForm);
            if (isformType.value == '新增') {
                addresource(obj).then((res => {
                    if (res.code == '200') {
                        ElMessage({
                            type: 'success',
                            message: res.message,
                        })
                        resetForm(ruleFormRef.value);
                        emit('refreshList', '')
                    } else {
                        ElMessage({
                            type: 'warning',
                            message: res.message,
                        })
                    }
                }))
            } else {
                editresource(obj).then((res => {
                    if (res.code == '200') {
                        ElMessage({
                            type: 'success',
                            message: res.message,
                        })
                        resetForm(ruleFormRef.value);
                        emit('refreshList', '')
                    } else {
                        ElMessage({
                            type: 'warning',
                            message: res.message,
                        })
                    }
                }))
            }


        } else {
            console.log('error submit!', fields)
        }
    })
}


const getresourceLevelCity = async (resourceType) => {
    let res = await resourceLevelCity(`?areaId=${JSON.parse(window.sessionStorage.getItem('usermsg')).areaId}&resourceType=${resourceType}`)
    if (res.code == '200') {
        LevelCity.value = res.data;
    }
}


const openform = (item, type, resourceType, obj) => {

    getresourceLevelCity(resourceType)
    if (type == '新增') {
        Object.assign(ruleForm, initialRuleForm)
    } else {
        Object.assign(ruleForm, item)
    }

    Object.assign(fRoptionObj, obj);
    ruleForm.resourceType = resourceType;
    ruleForm.areaId = JSON.parse(window.sessionStorage.getItem('usermsg')).areaId;
    isformType.value = type;
    isform.value = true;
}

const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields();
    isform.value = false
}

const getInfo = async () => {
    if (isformType.value == '新增') {
        let params = `?areaId=${JSON.parse(window.sessionStorage.getItem('usermsg')).areaId}&resourceType=${ruleForm.resourceType}&keywords=${ruleForm.zhong}`
        let res = await isExist(params)
        if (res.data) {
            ElMessageBox.alert('该物种已存在，请重新输入新物种', '提示', {
                confirmButtonText: '好的',
                callback: (action) => {
                    ruleForm.zhong = '';
                    // ElMessage({
                    //     type: 'info',
                    //     message: `action: ${action}`,
                    // })
                },
            })
        } else {
            let res = await getsp2000(ruleForm.zhong)
            if (res.code == '200') {
                let dt = res.data;
                ruleForm.zhongLatinName = dt.zhongLatinName;
                ruleForm.zhongPy = dt.zhongPy;
                ruleForm.zhongEn = dt.zhongEn;
                ruleForm.endangeredLevel = dt.endangeredLevel;
                ruleForm.level = dt.level;
                ruleForm.gang = dt.gang;
                ruleForm.mu = dt.mu;
                ruleForm.ke = dt.ke;
                ruleForm.shu = dt.shu;
                ruleForm.distribution = dt.distribution;
                ruleForm.characteristic = dt.characteristic;
            }
        }

    }

}

defineExpose({
    openform
})

</script>
<template>
    <div class="ha-form" v-if="isform">
        <div class="hf-box scol">
            <div class="hf-close" @click.stop="resetForm(ruleFormRef)">
                <img :src="close" alt="">
            </div>
            <div class="qzTitle">
                <div></div>
                <span>{{ isformType }}物种</span>
            </div>
            <div style="height: 16px;"></div>

            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-position="top" label-width="80px"
                class="demo-ruleForm" size="default" status-icon>
                <template v-if="library.indexOf(ruleForm.resourceType) != -1">
                    <el-form-item label="物种名称" prop="zhong">
                        <el-input v-model="ruleForm.zhong" @blur="getInfo" placeholder="请输入物种名称" />
                    </el-form-item>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="拼音">
                                <el-input v-model="ruleForm.zhongPy" placeholder="请输入拼音" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="拉丁名">
                                <el-input v-model="ruleForm.zhongLatinName" placeholder="请输入拉丁名" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="英文名">
                                <el-input v-model="ruleForm.zhongEn" placeholder="请输入英文名" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="IUCN名录">
                                <el-select v-model="ruleForm.endangeredLevel" placeholder="请选择IUCN名录">
                                    <el-option v-for="item in fRoptionObj.iucns" :key="item" :label="item.label"
                                        :value="item" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="市保护等级">
                                <el-select v-model="ruleForm.level" placeholder="请选择市保护等级">
                                    <el-option v-for="item in LevelCity" :key="item" :label="item.label"
                                        :value="item" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="保护等级">
                                <el-select v-model="ruleForm.level" placeholder="请选择保护等级">
                                    <el-option v-for="item in fRoptionObj.levels" :key="item" :label="item.label"
                                        :value="item" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="纲">
                                <el-select v-model="ruleForm.gang" filterable placeholder="请选择纲">
                                    <el-option v-for="item in fRoptionObj.gangs" :key="item" :label="item.label"
                                        :value="item" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="目">
                                <el-select v-model="ruleForm.mu" filterable placeholder="请选择目">
                                    <el-option v-for="item in fRoptionObj.mus" :key="item" :label="item.label"
                                        :value="item" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="科">
                                <el-select v-model="ruleForm.ke" filterable placeholder="请选择科">
                                    <el-option v-for="item in fRoptionObj.kes" :key="item" :label="item.label"
                                        :value="item" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="属">
                                <el-select v-model="ruleForm.shu" filterable placeholder="请选择属">
                                    <el-option v-for="item in fRoptionObj.shus" :key="item" :label="item.label"
                                        :value="item" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="分布">
                        <el-input v-model="ruleForm.distribution" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"
                            placeholder="请输入分布信息" />
                    </el-form-item>
                    <el-form-item label="形态学特征">
                        <el-input v-model="ruleForm.characteristic" :autosize="{ minRows: 2, maxRows: 4 }"
                            type="textarea" placeholder="请输入形态学特征" />
                    </el-form-item>
                </template>

                <template v-if="ruleForm.resourceType == 'tree'">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="物种名称" prop="zhong">
                                <el-input v-model="ruleForm.zhong" placeholder="请输入物种名称" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="拉丁名">
                                <el-input v-model="ruleForm.zhongLatinName" placeholder="请输入拉丁名" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item label="古树等级">
                                <el-select v-model="ruleForm.level" placeholder="请选择古树等级">
                                    <el-option label="国家一级" value="国家一级" />
                                    <el-option label="国家二级" value="国家二级" />
                                    <el-option label="国家三级" value="国家三级" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="树龄">
                                <el-input v-model="ruleForm.age" placeholder="请输入树龄" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="编号">
                                <el-input v-model="ruleForm.serialNumber" placeholder="请输入编号" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item label="树高">
                                <el-input v-model="ruleForm.height" placeholder="请输入树高" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="胸径">
                                <el-input v-model="ruleForm.xiongjing" placeholder="请输入胸径" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="冠幅">
                                <el-input v-model="ruleForm.guanfu" placeholder="请输入冠幅" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="特征">
                        <el-input v-model="ruleForm.characteristic" :autosize="{ minRows: 2, maxRows: 4 }"
                            type="textarea" placeholder="请输入特征" />
                    </el-form-item>
                    <el-form-item label="文化意义">
                        <el-input v-model="ruleForm.meaning" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"
                            placeholder="请输入文化意义" />
                    </el-form-item>


                </template>
                <template v-if="ruleForm.resourceType == 'natural'">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="资源名称" prop="zhong">
                                <el-input v-model="ruleForm.zhong" placeholder="请输入资源名称" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="类型">
                                <el-input v-model="ruleForm.type" placeholder="请输入类型" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="资源类型">
                                <el-input v-model="ruleForm.naturalType" placeholder="请输入资源类型" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="面积㎡">
                                <el-input v-model="ruleForm.areaNumber" placeholder="请输入面积" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="利用情况">
                        <el-input v-model="ruleForm.utilization" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"
                            placeholder="请输入利用情况" />
                    </el-form-item>
                </template>

                <el-form-item>
                    <el-button style="background-color:#387BFF;" type="primary" @click="submitForm(ruleFormRef)">
                        确定
                    </el-button>
                    <el-button @click="resetForm(ruleFormRef)">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<style scoped>
.ha-form {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    background-color: rgba(0, 0, 0, .5);
}

.hf-box {
    width: 500px;
    max-height: 900px;
    position: relative;
    padding: 24px;
    border-radius: 4px;
    background: #FFF;
    cursor: pointer;
}

.hf-close {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
}
</style>